<template>
    <div>
        <div class="cz">
          <!-- 基础信息 -->
          <div name="基础信息">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <h3>基础信息</h3>
              </div>
              <!-- 主体 -->
              <div name="主体">
                <el-form
                  :inline="true"
                  class="demo-form-inline"
                  ref="form"
                  :model="form"
                  label-width="80px"
                >
                  <el-form-item label="入库单号" prop="inbill_code">
                    <el-input class="kuan1" readonly v-model="form.inbill_code"></el-input>
                  </el-form-item>
  
                  <el-form-item class="kuan2" label="入库类型" prop="inbill_type">
                    <el-select
                      v-model="form.inbill_type"
                      clearable
                      placeholder="请选择"
                      :style="{ width: '300px' }"
                    >
                      <el-option label="进货入库" value="1"></el-option>
                      <el-option label="生产入库" value="2"></el-option>
                      <el-option label="退货入库" value="3"></el-option>
                      <el-option label="换货入库" value="4"></el-option>
                      <el-option label="借入入库" value="5"></el-option>
                      <el-option label="损耗入库" value="6"></el-option>
                      <el-option label="样品入库" value="7"></el-option>
                      <el-option label="盘盈入库" value="8"></el-option>
                      <el-option label="调拨入库" value="9"></el-option>
                      <el-option label="受赠入库" value="10"></el-option>
                      <el-option label="初期入库" value="11"></el-option>
                      <el-option label="其他入库" value="12"></el-option>
                    </el-select>
                  </el-form-item>
  
                  <el-form-item class="kuan2" label="仓库名称"  prop="ware_code">
                    <el-select
                      v-model="form.ware_code"
                      clearable
                      placeholder="请选择"
                      :style="{ width: '300px' }"
                      @change="kuweixlk"
                    >
                      <el-option v-for="item in ckxlk" :key="item.ware_code" :label="item.ware_name" :value="item.ware_code"></el-option>
                    </el-select>
                  </el-form-item>
    
                  <el-form-item class="kuan2" label="入库日期" prop="inbll_date">
                    <el-date-picker
                      class="kuan1"
                      v-model="form.inbll_date"
                      type="date"
                      placeholder="选择日期"
                    >
                    </el-date-picker>
                  </el-form-item>
  
                  <el-form-item label="关联单号" prop="buy_code" class="vv">
                    <el-input v-model="form.buy_code" :readonly="isreadonly" @click.native="gldh()" class="kuan1"></el-input>
                    <el-checkbox v-model="form.checked" @change="inoutgldh()">关联进货单号</el-checkbox>
                  </el-form-item>
    
                  <el-form-item label="供应商">
                    <el-select
                      v-model="form.gysbh"
                      @change="GYSTjSelect()"
                      clearable
                      placeholder="请选择"
                      :style="{ width: '300px' }"
                      :disabled="isDisabled"
                    >
                      <el-option
                        v-for="item in Adate"
                        :key="item.supply_code"
                        :label="item.supply_name"
                        :value="item.supply_code"
                      >
                      </el-option>
                    </el-select>
                    <el-link
                      style="margin-left: 15px"
                      type="success"
                      :underline="false"
                      >设置</el-link
                    >
                  </el-form-item>
    
                  <el-form-item style="margin-left: 76px" label="联系人" prop="link_man">
                    <el-input
                      class="kuan1"
                      :disabled="true"
                      v-model="form.link_man"
                    ></el-input>
                  </el-form-item>
    
                  <el-form-item label="联系方式" prop="link_way">
                    <el-input
                      class="kuan1"
                      :disabled="true"
                      v-model="form.link_way"
                    ></el-input>
                  </el-form-item>
    
                  <el-form-item class="kuan2" label="经办人" prop="inbill_duty_man">
                    <el-select
                      v-model="form.inbill_duty_man"
                      clearable
                      placeholder="请选择经办人"
                      :style="{ width: '300px' }"
                    >
                      <el-option label="张三" value="张三"></el-option>
                      <el-option label="李四" value="李四"></el-option>
                      <el-option label="王五" value="王五"></el-option>
                      <el-option label="赵六" value="赵六"></el-option>
                    </el-select>
                  </el-form-item>
    
                  <el-form-item label="备注" prop="remark">
                    <el-input
                      class="kuan1"
                      :autosize="{ minRows: 6, maxRows: 10 }"
                      placeholder="请输入内容"
                      style="width: 800px"
                      type="textarea"
                      v-model="form.remark"
                    />
                  </el-form-item>
                </el-form>
              </div>
            </el-card>
          </div>
          <!-- 基础信息 -->
    
          <!-- 进货明细 -->
          <div name="入库明细">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <h3>入库明细</h3>
              </div>
              <!-- 主体 -->
              <div name="主体">
                <!-- 按钮 -->
                <div class="grid-content bg-purple">
                  <div style="margin-bottom: 10px">
                    <el-button type="success" @click="TjCha()">添加</el-button>
                    <el-button @click="handleClick">移除</el-button>
                  </div>
                </div>
    
                <!-- 主体 -->
                <div>
                  <el-table
                    :data="BDate"
                    border
                    ref="myTable"
                    height="250"
                    style="width: 100%"
                    @selection-change="handleSelectionChange"
                  >
                    <el-table-column type="selection" width="55"> </el-table-column>
    
                    <el-table-column prop="id" label="序号"> </el-table-column>
    
                    <el-table-column prop="item_code" label="货品编号">
                    </el-table-column>
                    <el-table-column prop="item_name" label="货品名称">
                    </el-table-column>
                    <el-table-column prop="item_type_name" label="货品类型" width="150">
                    </el-table-column>
                    <el-table-column prop="model_code" label="规格型号" width="115">
                    </el-table-column>
                    <el-table-column prop="unit" label="单位" width="115">
                    </el-table-column>
                    <el-table-column prop="buy_num" label="进货数量" width="120">
                    </el-table-column>
                    <el-table-column prop="inbill_num" label="已入库数量" width="120">
                    </el-table-column>
                    <el-table-column prop="weiRK" label="未入库数量" width="120">
                        <template slot-scope="scope">
                          <el-input v-model="scope.row.weiRK" readonly></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column prop="kuwei" label="入库仓位" width="120">
                        <template slot-scope="scope">
                          <el-select v-model="scope.row.kuwei" placeholder="请选择">
                            <el-option v-for="item in kw" :key="item.area_code" :label="item.area_name" :value="item.area_code">
                            </el-option>
                          </el-select>
                        </template>
                      </el-table-column>
                      <el-table-column prop="rksl" label="本次入库数量" width="120">
                        <template slot-scope="scope">
                          <el-input v-model="scope.row.rksl" v-on:blur="number_change(scope.row)"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column prop="buy_price" label="进货单价" width="120">
                        <template slot-scope="scope">
                          <el-input v-model="scope.row.buy_price"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column prop="jinhje" label="进货金额" width="120">
                        <template slot-scope="scope">
                          {{ scope.row.jhje}}
                        </template>
                      </el-table-column>
                      <el-table-column prop="scrq" label="生产日期" width="160">
                        <template slot-scope="scope">
                          <el-date-picker v-model="scope.row.scrq" type="date" placeholder="选择日期" style="width:130px;">
                          </el-date-picker>
                        </template>
                      </el-table-column>
                      <el-table-column fixed="right" label="操作" width="120">
                        <template slot-scope="scope">
                          <el-button size="mini" type="danger" plain @click="handleDelete(scope.row)">移除</el-button>
                        </template>
                      </el-table-column>
    
                  </el-table>
                </div>
                <div style="float: right">
                  <el-button @click="GuanBi()">关闭</el-button>
                  <el-button @click="BaoCun()">保存并新增</el-button>
                  <el-button @click="BaoCun1()" type="success">保存</el-button>
                </div>
              </div>
            </el-card>
          </div>
          <!-- 进货明细 -->
        </div>
  
        <el-dialog title="添加货品" :visible.sync="dialogVisible" width="45%">
          <div style="margin-bottom: 15px;margin-left: -500px;">
              入库单号:{{ this.hpzjhdh }}
            </div>
          <div>
            <el-card class="box-card1">
              <div>
                <!-- 头部 -->
                <el-form :inline="true" class="demo-form-inline">
                  <el-input
                    style="width: 200px"
                    v-model="tj"
                    placeholder="请输入货品编号/名称"
                  ></el-input>
                  <el-select v-model="dw" placeholder="请选择单位" style="width:200px;">
                    <el-option label="吨" value="吨"></el-option>
                    <el-option label="块" value="块"></el-option>
                    <el-option label="根" value="根"></el-option>
                    <el-option label="台" value="台"></el-option>
                  </el-select>
    
                  <el-form-item class="block">
                    <el-button @click="Qing()">重置</el-button>
                    <el-button type="success" @click="dj()">查询</el-button>
                  </el-form-item>
                </el-form>
    
                <!-- 头部 尾 -->
                <el-table
                  :data="Cdate"
                  ref="MyDate"
                  border
                  height="250"
                  @select="handleSelection"
                  style="width: 100%"
                >
                  <el-table-column fixed type="selection" width="55" />
                  <el-table-column fixed width="50" label="序号" prop="id" />
                  <el-table-column fixed prop="item_code" label="货品编号" />
                  <el-table-column fixed prop="item_name" label="货品名称" />
                  <el-table-column fixed prop="model_code" label="规格型号" />
                  <el-table-column fixed prop="unit" label="单位" />
                  <el-table-column fixed prop="buy_price" label="进货单价" />
                  <el-table-column fixed prop="buy_num" label="进货数量" />
                  <el-table-column fixed prop="jhje" label="进货金额" />
                  <el-table-column fixed prop="inbill_num" label="已入库" />
                  <el-table-column fixed prop="weiRK" label="未入库" />
                </el-table>
              </div>
            </el-card>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="hpxxhq()">确 定</el-button>
          </span>
        </el-dialog>
      </div>
  </template>
  
  <script>
  import $http from '@/http/base.js';
  export default {
    data(){
      return {
        form:{
            inbill_code: "",
            inbill_type: "",
            ware_code: "",
            inbll_date: "",
            buy_code: "",
            supply_code: "",
            link_man: "",
            link_way: "",
            inbill_duty_man: "",
            remark: "",
            update_time: new Date(),
            update_by: localStorage.getItem("UName"),
        },
        ckxlk:[],//仓库下拉框
        gysbh:[],//供应商
        isreadonly:false,//关联单号
        isDisabled:false,//供应商
        XzjhdialogFormVisible: false,//进货单选择
        lxr: "",//联系人文本
        lxfs: "",//联系方式
        Adate:[],
        BDate:[],
        BDate1:[],
        bz:"",//备注
        jhdh:"",//关联单号中进货单号
        djzt:"",//单据状态
        gldhgys:"",//关联单号供应商
        jhr:"",//关联单号进货人
        tableData:[],
        mys: 4,//每页数
        dqy: 1,//当前页
        zts: 0,//总条数
        dialogVisible:false,//添加货品弹框
        hpzjhdh:"",//添加货品进货单号
        tj:"",//添加货品条件查
        dw:"",//单位
        Cdate:[],//添加货品数据集合
        kw:[],//库位
        ckbh:"",
      }
    },
    methods:{
        //修改页面获取信息
        fill(){
            $http
                .get('api/Wh_Inbill_h/RKBhSelect?bh=' + localStorage.getItem('rkdhcz'))
                .then(res =>{
                    this.form.inbill_code = res.inbill_code;
                    this.form.inbill_type = res.inbill_type;
                    this.form.ware_code = res.ware_code;
                    this.form.inbll_date = res.inbll_date;
                    this.form.buy_code = res.buy_code;
                    this.form.gysbh = res.supply_code;
                    this.form.link_man = res.link_man;
                    this.form.link_way = res.link_way;
                    this.form.inbill_duty_man = res.inbill_duty_man;
                    this.form.remark = res.remark;
                    this.kuweixlk()
                })
                .catch(err =>{
                    console.log(err)
                })
        },
        //仓库下拉框
        CKSelect(){
          $http
          .get('api/Wh_Inbill_h/CKXLKSelect')
              .then(res =>{
                this.ckxlk = res
                this.ckbh = res.ware_code
                console.log(this.Adate)
              })
              .catch(err =>{
                console.log(err)
              })
      },
      //获取当前时间
      getCurrentTime(){
        const date = new Date();
        const year = date.getFullYear();
        const month = ("0" + (date.getMonth() + 1)).slice(-2);
        const day = ("0" + date.getDate()).slice(-2);
        const hours = ("0" + date.getHours()).slice(-2);
        const minutes = ("0" + date.getMinutes()).slice(-2);
        const seconds = ("0" + date.getSeconds()).slice(-2);
  
        this.currenTime = `${year}${month}${day}${hours}${minutes}`;
        this.currenTime1 = `${year}-${month}-${day}`;
        this.currenTime2 = `${year}${month}${day}`;
      },
      //复选框改变事件
      inoutgldh() {
        if (this.adrk.checked == true) {
          this.isDisabled = true;
          this.isreadonly = true;
          this.form.supply_code = "";
          this.form.link_man = "";
          this.form.link_way = "";
          this.form.buy_code = "";
        }
        if (this.form.checked == false) {
          this.isDisabled = false;
          this.isreadonly = false;
        }
      },
      //关联单号弹框
      gldh() {
        if (this.form.checked == true) {
          this.XzjhdialogFormVisible = true;
        }
        if (this.form.checked == false) {
          this.XzjhdialogFormVisible = false;
        }
      },
      //供应商下拉框
      GYSSelect(){
          $http
              .get('api/wh_Buy_Order_h/GYSXlkSelect')
              .then(res =>{
                this.Adate = res
                console.log(this.Adate)
              })
              .catch(err =>{
                console.log(err)
              })
      },
      //根据供应商下拉框查询联系人和联系方式
      GYSTjSelect(){
        $http
            .get('api/wh_Buy_Order_h/GYSTjSelect?tj='+this.form.gysbh)
            .then(res =>{
              //联系人
              this.lxr = res.link_man
              //联系方式
              this.lxfs = res.link_tel
            })
            .catch(err =>{
              console.log(err)
            })
      },
      //添加弹框
      TjCha(){
        this.dialogVisible = true;
        this.hpxxchaxun();
      },
      //根据进货单号查商品
      hpxxchaxun(){
        $http
            .get('api/Wh_Inbill_h/JHDHchahpxx?buy_code='+ this.form.buy_code)
            .then(res =>{
              this.Cdate = res
            })
            .catch(err =>{
              console.log(err)
            })
      },
      //库位下拉框查询
      kuweixlk() {
        $http
          .get("api/Wh_Inbill_h/SelectArea?ware_code="+this.form.ware_code)
          .then((res) => {
            console.log(this.form.ware_code)
            console.log("库位信息")
            console.log(res);
            this.kw = res;
          })
          .catch((err) => {
            console.log(err);
          });
      },
      handleSelection(selection){
        this.BDate1 = selection;
        console.log(selection)
      },
      //货品信息获取 按钮
      hpxxhq() {
        this.BDate = [];
        this.BDate = this.BDate1;
        this.dialogVisible = false;
      },
      //移除
      handleClick(){
  
      },
      //获取信息
      handleSelectionChange(val) {
        this.selectedItems = val.map((row) => ({
          ...row,
          buy_price: row.buy_num * row.inbill_price, // 计算 buy_price 和 inbill_price 的乘积作为 amount
          buy_num: row.buy_num,
        }));
        console.log("表单选中信息：" + JSON.stringify(this.selectedItems)); // 这里的 val 就是选中的行数据1
      },
      number_change(row) {
      if(row.rksl>row.weiRK){
        this.$message({
          message: '本次入库数量不能超过未入库数量！',
          type: 'warning'
        });
        row.rksl=0;
      }
    },
      handleRadioChange(){
  
      },
      //条数改变
      handleSizeChange(val) {
        this.mys = val;
        this.cha();
      },
      //页数改变
      handleCurrentChange(val) {
        this.dqy = val;
        this.cha();
      },
      //保存
      BaoCun(){
        this.getCurrentTime();
        this.ShiJIan(this.form.jhrq);
        console.log(this.jhdh)
        console.log("选中的信息")
        console.log(this.selectedItems)
        $http
          .post('api/wh_Buy_Order_h/Insert',{
            jhzb:{
              inbill_code: this.form.inbill_code,
              inbill_type: this.form.inbill_type,
              inbill_state: this.form.inbill_code,
              inbll_date:this.form.inbll_date,
              buy_code:this.form.buy_code,
              supply_code:this.form.gysbh,
              link_man: this.form.link_man,
              link_way: this.form.link_way,
              inbill_duty_man: this.form.inbill_duty_man,
              update_by: this.update_by,
              update_time: this.currenTime1,
              remark: this.form.remark, 
            },
            jhmxs:this.selectedItems,
          })
          .then(res =>{
            this.TiShiCG('增加')
            console.log(res)
          })
          .catch(err =>{
            this.TiShiSB('增加')
          })
      },
      GuanBi(){
        this.$router.push({
          path:"/RKGL_SelectZB" //跳转的页面
        })
      },
      //操作提示 --成功
    TiShiCG(xx) {
      this.$message({
        message: xx + "操作成功!",
        type: "success",
      });
    },
    //操作提示 --失败
    TiShiSB(xx) {
      this.$message.error(xx + "操作失败");
    },
    },
    mounted(){
      this.fill()
      this.GYSSelect()
      this.CKSelect()
      this.kuweixlk()
    }
  }
  </script>
  
  <style>
  
  </style>